import {
  ProDescriptions,
  ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import { useRef } from 'react';
import { useModel } from '@@/exports';
import { UserType } from '@/models/user';
import { message } from 'antd';
import { renewUser } from '@/services/userService';

export default () => {
  const actionRef = useRef();
  const { initialState } = useModel('@@initialState');
  const loginUser = initialState?.loginUser;

  const renew = async (fields: UserType.UserRenewRequest) => {
    const hide = message.loading('正在提交');
    try {
      await renewUser(fields).then((res) => {
        if (res.data === 1) {
          message.error('修改的内容相同');
          return res;
        }
        message.success('修改成功');
        return res;
      });
    } catch (e: any) {
      message.error('修改，请重试！', e.message);
    } finally {
      hide();
    }
  };

  /***
   *  表格列表
   */
  const columns: ProDescriptionsItemProps<UserType.User>[] = [
    {
      title: '名称',
      key: 'text',
      dataIndex: 'userName',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      hideInForm: false,
      valueEnum: {
        0: { text: '男' },
        1: { text: '女' },
      },
    },
    {
      title: '邮箱',
      valueType: 'text',
      dataIndex: 'email',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '简介',
      valueType: 'text',
      dataIndex: 'userProfile',
      copyable: true,
      ellipsis: true,
    },
  ];
  return (
    <ProDescriptions<UserType.User>
      actionRef={actionRef}
      // bordered
      // formProps={{
      //     onValuesChange: (e, f) => console.log(e,f.valueOf()),
      // }}
      title="个人信息"
      request={async () => {
        return Promise.resolve({
          success: true,
          data: loginUser,
        });
      }}
      editable={{
        onSave: async (keypath, newInfo) => {
          await renew(newInfo);

          return true;
        },
      }}
      columns={columns}
    >
      <ProDescriptions.Item
        dataIndex="avatarUrl"
        label="头像"
        valueType="image"
      />
    </ProDescriptions>
  );
};
